<template>
  <div ref="barchart" class="bar-chart"></div>
</template>

<script>
import { title } from "@/settings";
export default {
  props: ["barData"],
  data() {
    return {
      chart: null,
      title: "",
      barIndex: "",
      xData: [],
      yData: [],
    };
  },
  watch: {
    barData: {
      handler(val, newVal) {
        this.initChart();
      },
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      console.log("barData", this.barData);
      this.chart = this.$echarts.init(this.$refs.barchart);
      let option = this.getOption();
      this.chart.setOption(option);
      this.chart.resize();
    },
    getOption() {
      let option = {
        color: ["#5B9BD5"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: false,
            },
          },
          transitionDuration: 0,
          textStyle: {
            align: "left",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "6%",
          top: "5%",
          containLabel: true,
        },
        legend: {
          itemWidth: 12,
          itemHeight: 12,
          right: "5%",
          textStyle: {
            color: "#404040",
            fontSize: "10px",
          },
          itemGap: 15,
        },
        xAxis: {
          type: "category",
          data: this.barData.xData,
          axisLine: {
            // lineStyle: {
            //   type: "solid", //x轴线条类型
            //   color: "#ffffff", //x轴线条颜色
            //   width: "1", //x轴线条宽度
            // },
            show: false,
          },
          axisLabel: {
            show: true,
            interval: 0, // 使x轴文字显示全
            color: "#ffffff",
          },
          axisTick: {
            //x轴刻度线
            show: false,
          },
        },
        yAxis: {
          show: true,
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
            color: "#ffffff",
          },
          axisLabel: {
            fontSize: 12,
            interval: 0, // 使x轴文字显示全
            color: "#ffffff",
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
        },
        series: [
          {
            data: this.barData.yData,
            barWidth: "70%",
            type: "bar",
            xAxisIndex: 0,
            // // silent: false,
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ["#6293CD", "#63BFB2", "#D44B83", "#DF796A"];
                  return colorList[params.dataIndex];
                },
                label: {
                  show: false, //开启显示
                  position: "inside", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 14,
                  },
                },
              },
            },
          },
        ],
      };

      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
.bar-chart {
  width: 100%;
  height: 100%;
}
</style>
